<form class="form-horizontal" name="vm_form" ng-hide="open_new_disk">

<div class="modal-header">
    <a class="close" ng-click="close()">&times;</a>
    <h4>虚拟机[{{ vm.name }}]配置</h4>
    <div class="alert alert-info" ng-show="vm.status != 'shutdown'&&vm.status != 'failed'">
            虚拟机正在运行，请关闭后修改
        </div>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span2">
    <ul class="nav nav-list">
        <li class="active"><a href="#basic" data-toggle="tab">基本</a></li>
        <li><a href="#sys" data-toggle="tab">系统</a></li>
        <li><a href="#disk" data-toggle="tab">磁盘</a></li>
        <li><a href="#network" data-toggle="tab">网卡</a></li>
        <li><a href="#bootmenu" data-toggle="tab">启动顺序</a></li>
        <li><a href="#display" data-toggle="tab">显示</a></li>
        <li><a href="#soundcard" data-toggle="tab">声音</a></li>
        <li><a href="#other" data-toggle="tab">其他</a></li>
        <!--<li class="divider"></li>
        <li><a href="#backup" data-toggle="tab">备份</a></li>
        -->
        <li><a href="#HA" data-toggle="tab">HA</a></li>
        <li class="divider"></li>
        <li><a href="#help" data-toggle="tab">帮助</a></li>
    </ul>
</div>
<div class="span10 tab-content">
<div id="basic" class="tab-pane active">
    <h6>基本设置</h6>

    <form class="form-horizontal">
        <div class="control-group">
            <label for="cluster" class="control-label">集群</label>

            <div class="controls">
                <input type="text" value="{{ vm.host.cluster.name }}" disabled="disabled" class="span4"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">HOST</label>

            <div class="controls">
                <input type="text" value="{{ vm.host.host_name }}" disabled="disabled" class="span4"/>
            </div>
        </div>
        <div class="control-group">
            <label for="name" class="control-label">名字</label>

            <div class="controls">
                <input type="text" value="{{ vm.name }}" ng-model="vm.name" disabled="disabled" class="span4"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">模版</label>

            <div class="controls">
                <input type="text" value="{{ vm.vdisk_set[0].image.name||'无' }}" disabled="disabled" class="span4"/>
            </div>
        </div>
        <div class="control-group">
            <label for="dec" class="control-label">描述</label>

            <div class="controls">
                <textarea name="" id="" cols="30" rows="3" ng-model="vm.description">{{ vm.description }}</textarea>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">操作系统</label>

            <div class="controls">
                <select class="span4" ng-model="vm.os_type" ng-options="os.name for os in ostypes">
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">用户</label>

            <div class="controls">
                <select class="span4" ng-model="vm.user" ng-options="user.username for user in users">
                </select>
            </div>
        </div>
    </form>

</div>
<div id="sys" class="tab-pane">
    <h6>系统</h6>

                <div class="control-group">
            <label for="mem" class="control-label">内存</label>

            <div class="controls">
                <input type="text" ng-model="vm.memory" class="input-mini"> MB
            </div>
        </div>
        <div class="control-group">
            <label for="inputWarning" class="control-label">CPU</label>

            <div class="controls">
                <input type="text" ng-model="vm.vcpu" class="input-mini">
            </div>
        </div>
            <div class="control-group">
            <label class="control-label" style="width: 102px;"><input type="checkbox" ng-model="vm.cpu_host_model"></label>

            <label class="controls" style="padding-top: 6px">
                使用主机cpu类型
                ({{ vm.host.cpu_type }})
            </label>
        </div>
     <!--<div class="control-group">
         <label class="control-label" style="width: 102px;"><input type="checkbox" ng-model="vm.nestedvt"></label>

            <label class="controls" style="padding-top: 6px">
                嵌套虚拟化(nested vt-x)
            </label>
        </div>-->

</div>
<div id="disk" class="tab-pane">
    <div id="disktable">
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">×</button>
            最多可以添加<strong>4</strong>个磁盘设备，包括光驱.
        </div>
        <div class="btn-toolbar server-btn-toolbar ">
            <div class="btn-group">
                <button class="btn btn-mini" ng-click="new_disk()" ng-disabled="vdisklength()">添加</button>
                <button class="btn btn-mini" ng-click="update_disk()" ng-disabled="!selected_disk||selected_disk.storage.protocol=='iscsi'">修改</button>

                <button class="btn btn-mini" ng-click="delete_disk()" ng-disabled="!selected_disk">删除</button>
            </div>
            <div class="btn-group">
            <!--<button class="btn btn-mini" ng-click="attach_disk()" ng-disabled="vm.vdisk_set.length>3">关联</button>-->
            <button class="btn btn-mini" ng-click="detach_disk()" ng-disabled="!selected_disk||selected_disk.device_type== 'cdrom'">解除</button>
                </div>
        </div>

        <table class="table table-striped table-bordered table-condensed">
            <thead>
            <tr>
                <th>名称</th>
                <th>类型</th>
                <th>存储</th>

                <!--<th>设备</th>-->
                <th>大小(GB)</th>
                <th>创建日期</th>
                <th>设备</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="disk in vm.vdisk_set |activeitem" selectable ng-click="select_disk()">
                <td class="center"><img ng-src="/static/images/{{ disk.device_type }}.png"
                                        class="img-size16"/> {{ disk.name }}</td>
                <td ng-show="disk.device_type=='disk'"> {{ disk.format }}</td>
                <td ng-show="disk.device_type=='cdrom'">{{ disk.device_type }}</td>
                <td class="center">
                    {{ disk.storage.name }}
                </td>
                <!--<td class="center">
                    {{ disk.mountpoint }}
                </td>-->
                <td class="center">
                    {{ disk.size }}
                </td>
                <td class="center">
                    {{ disk.created_at |date:'yyyy-MM-dd HH:mm:ss Z' }}
                </td>
                <td class="center">
                    {{ disk.bus||'ide' }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
<div id="network" class="tab-pane">
    <div>
        <ul id="interface" class="nav nav-tabs">
            <li class="active"><a href="#iface1" data-toggle="tab">网卡1</a></li>
            <li><a href="#iface2" data-toggle="tab">网卡2</a></li>
            <li><a href="#iface3" data-toggle="tab">网卡3</a></li>
            <li><a href="#iface4" data-toggle="tab">网卡4</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id='iface1'>
            <interfaceui model='vm.interface1' index="1"></interfaceui>
        </div>
        <div class="tab-pane" id='iface2'>
            <interfaceui model='vm.interface2' index="2"></interfaceui>
        </div>
        <div class="tab-pane" id='iface3'>
            <interfaceui model='vm.interface3' index="3"></interfaceui>
        </div>
        <div class="tab-pane" id='iface4'>
            <interfaceui model='vm.interface4' index="4"></interfaceui>
        </div>
    </div>

</div>
<div id="bootmenu" class="tab-pane">
    <h6>启动顺序</h6>

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">随系统启动</label>

            <div class="controls">
                <input type="checkbox" ng-model="vm.autostart">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">允许启动菜单</label>

            <div class="controls">
                <input type="checkbox" ng-model="vm.bootmenu">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">顺序(拖动排序)</label>

            <div class="controls">
                <bootorder></bootorder>
            </div>
        </div>

        <!-- <div class="control-group">
             <i class="icon-arrow-down"></i><a href="javascript:void(0)"
                                               onclick="$('#boot_advance').toggle();">内核启动</a>
         </div>
         <div id="boot_advance" style="display: none;">
             <div class="control-group">
                 <label class="control-label">kernel路径</label>

                 <div class="controls">
                     <input type="text">
                 </div>
             </div>
             <div class="control-group">
                 <label class="control-label">initrd路径</label>

                 <div class="controls">
                     <input type="text">
                 </div>
             </div>
             <div class="control-group">
                 <label class="control-label">启动参数</label>

                 <div class="controls">
                     <input type="text">
                 </div>
             </div>
         </div>-->
    </form>
</div>
<div id="display" class="tab-pane">
    <h6>控制台</h6>

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">类型</label>

            <div class="controls">
                <select class="span4" ng-model="vm.graphics_type">
                    <option value="vnc">vnc</option>
                    <!--<option>rdp</option>-->
                    <option value="spice">spice</option>
                </select>
            </div>
        </div>
        <div class="control-group" ng-show="vm.graphics_type=='spice'">
            <label class="control-label">显存</label>

            <div class="controls">
                <select class="span4" ng-model="vm.vram">
                    <option value="32768">32</option>
                    <option value="65536">64</option>
                    <option value="131072">128</option>
                    <option value="262144">256</option>
                </select> MB
            </div>
        </div>
        <div class="control-group" ng-show="vm.graphics_type=='spice'">
            <label class="control-label">USB重定向</label>

            <div class="controls">
                <input type="checkbox" ng-model="vm.usbredir">
            </div>
        </div>
        <div class="control-group" ng-show="vm.graphics_type=='spice'">
            <label class="control-label">显示设备</label>

            <div class="controls">
                <select class="span4" ng-model="vm.monitor">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="4">4</option>
                </select>
            </div>
        </div>
        <div class="control-group" ng-show="vm.graphics_type=='spice'">
                <i class="icon-arrow-down"></i><a ng-click="hasadvance = !hasadvance">高级</a>
        </div>

        <div id="disk_advance" ng-show="hasadvance&&vm.graphics_type=='spice'">
            <div class="control-group">
                <label class="control-label">image</label>

                <div class="controls">
                    <select class="span4" ng-model="vm.image_compress">
                        <option value="auto_glz">auto_glz</option>
                        <option value="auto_lz">auto_lz</option>
                        <option value="off">off</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">JPEG</label>

                <div class="controls">
                    <select class="span4" ng-model="vm.jpeg_compress">
                        <option value="auto">auto</option>
                        <option value="never">never</option>
                        <option value="always">always</option>
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">streaming</label>

                <div class="controls">
                    <select class="span4" ng-model="vm.streaming_mode">
                        <option value="filter">filter</option>
                        <option value="all">all</option>
                        <option value="off">off</option>
                    </select>
                </div>
            </div>
        </div>

    </form>
</div>
<div id="other" class="tab-pane">
    <h6>其他设置</h6>

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">启用ACPI</label>

            <div class="controls">
                <input type="checkbox" ng-model="vm.acpi"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">启用APIC</label>

            <div class="controls">
                <input type="checkbox" ng-model="vm.apic"/>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">时钟偏移</label>

            <div class="controls">
                <select name="" id="" ng-model="vm.clock">
                    <option value="localtime">本地</option>
                    <option value="utc">UTC</option>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">还原模式</label>

            <div class="controls ">
                <input type="checkbox" ng-model="vm.resetmode"/>
            </div>
        </div>
    </form>
</div>

<div id="soundcard" class="tab-pane">
    <h6>其他设置</h6>

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">启用</label>

            <div class="controls">
                <input type="checkbox" ng-model="vm.soundenable"/>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">声卡类型</label>

            <div class="controls">
                <select name="" id="" ng-model="vm.soundcard" ng-disabled="!vm.soundenable">
                    <option value="ac97">ac97</option>
                    <option value="ich6">ich6</option>
                </select>
            </div>
        </div>

    </form>
</div>


<div id="HA" class="tab-pane">
    <h6>高可用设置</h6>

    <form class="form-horizontal">
        <!--<div class="control-group">
            <label class="control-label">优先级</label>

            <div class="controls">
                <select class="span6" ng-model="vm.hapriority">
                    <option value="0">无</option>
                    <option value="1">低</option>
                    <option value="2">中</option>
                    <option value="3">高</option>
                </select>
            </div>
        </div>
        <hr>-->
        <div class="control-group">
            <label class="control-label">watchdog</label>

            <div class="controls">
                <select class="span6" ng-model="vm.watchdog">
                    <option value="">无</option>
                    <option value="i6300esb">i6300esb</option>
                    <option value="ib700">ib700</option>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">动作</label>

            <div class="controls">
                <select class="span6" ng-model="vm.dogaction" ng-disabled="!vm.watchdog">
                    <option value="reset">reset</option>
                    <option value="shutdown">shutdown</option>
                    <option value="poweroff">poweroff</option>
                    <option value="pause">pause</option>
                </select>
            </div>
        </div>
    </form>
</div>

<div id="backup" class="tab-pane">
    <h6>备份设置</h6>

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">备份策略</label>

            <div class="controls">
                <select class="span6" ng-options="b.name for b in strategies" ng-model="vm.backup_policy">
                    <option value="">无</option>
                </select>
            </div>
        </div>
        <hr>
        <div class="control-group" ng-show="vm.backup_policy">
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>备份类型</th>
                    <th>压缩比</th>
                    <th>备份位置</th>
                    <th>计划时间</th>
                </tr>
                </thead>
                <tbody>
                <tr selectable>
                    </td>
                    <td>{{ vm.backup_policy.name }}</td>
                    <td>{{ vm.backup_policy.backuptype | backuptype }}</td>
                    <td>{{ vm.backup_policy.compresslevel }}</td>
                    <td>{{ vm.backup_policy | backuplocation }}</td>
                    <td>{{ vm.backup_policy | backuptime }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>

</div>
</div>
</div>
<div class="modal-footer" ng-hide="open_new_disk">
    <a data-dismiss="modal" class="btn" ng-click="close()">取消</a>
    <button type="submit" ng-disabled="!vm_form.$valid" ng-hide="vm.status != 'shutdown'&&vm.status != 'failed'" class="btn btn-primary" ng-click="do_update()">保存</button>
</div>
</form>
